<template>
  <el-dialog
    class="troila-dialog troila-transfer-dialog"
    title="绑定用户"
    :visible.sync="dialogFormVisible"
    :modal-append-to-body="true"
    :append-to-body="true"
    width="740px"
  >
    <el-form class="troila-form" :label-width="formLabelWidth" ref="form">
      <el-form-item label="角色名称" style="padding-top: 0;"
        ><div class="el-input">
          {{ ishasValue(form, 'roleName') }}
        </div>
      </el-form-item>
    </el-form>
    <el-transfer
      class="troila-transfer"
      filterable
      :filter-method="filterMethod"
      :titles="['待选用户', '已选用户']"
      filter-placeholder="请输入用户名"
      v-model="chooseList"
      :data="allList"
      :props="{
        key: 'id',
      }"
      ref="myTransfer"
    >
      <span slot-scope="{ option }"
        >{{ option.userName }}（{{ option.loginName }}）</span
      >
    </el-transfer>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="ajaxIng" @click="submitForm('form')"
        >确 定</el-button
      >
      <el-button @click="dialogFormVisible = false">{{
        ajaxIng ? '关 闭' : '取 消'
      }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'roleUser',
  props: {
    value: {
      // row
      type: [Boolean, Object],
      default: false,
    },
  },
  data() {
    return {
      dialogFormVisible: this.value ? true : false, //弹窗显示
      ajaxIng: false,
      allList: [],
      chooseList: [],
      roleId: '',
      formLabelWidth: '100px', //标题文字宽度
      form: { roleName: '' },
    }
  },
  watch: {
    value(v) {
      let show = v ? true : false
      this.dialogFormVisible !== show ? (this.dialogFormVisible = show) : null
      if (v) {
        this.roleId = v.id
        this.form.roleName = v.roleName
        this.API.roleManage.userList({ roleId: this.roleId }).then((res) => {
          if (res.code == 1) {
            this.allList = res.data.allUser
            if (res.data.roleUser.length > 0) {
              this.chooseList = []
              res.data.roleUser.map((v) => {
                v ? this.chooseList.push(v.id) : null
              })
            } else {
              this.chooseList = []
            }
          }
        })
        if (this.$refs.myTransfer) {
          this.$refs.myTransfer.$children['0']._data.query = ''
          // 清空右边搜索
          this.$refs.myTransfer.$children['3']._data.query = ''
        }
      }
    },
    dialogFormVisible(v) {
      v ? null : this.$emit('input', v)
    },
  },
  methods: {
    filterMethod(query, item) {
      return (
        (item.userName && item.userName.indexOf(query) > -1) ||
        (item.loginName && item.loginName.indexOf(query) > -1)
      )
    },
    submitForm(formName) {
      if (this.ajaxIng) {
        return
      } else {
        let postData = {
          roleId: this.roleId,
          userIds: this.chooseList.join(','),
        }
        this.API.roleManage.addUserRole(postData).then((res) => {
          if (res.code == 1) {
            this.$alertFn.success(`操作成功 ！`)
            this.ajaxIng = false
            this.dialogFormVisible = false
            this.$emit('change')
          } else {
            this.$alertFn.error(`操作失败 ！`)
          }
        })
      }
    },
  },
}
</script>
<style scoped>
.troila-transfer-dialog >>> .el-dialog {
  height: 80vh !important;
  margin: 10vh auto !important;
}
.troila-transfer-dialog >>> .el-dialog__body {
  height: calc(100% - 61px - 72px);
  box-sizing: border-box;
}
.troila-dialog .troila-transfer {
  height: calc(100% - 42px);
}
</style>